// 存储用户输入的城市
let city;
city = "益阳";

// 页面加载完成后，默认显示益阳的天气
$(document).ready(function () {
    getWeather(city);
});

// 搜索按钮点击事件
$("#buttonSearch").click(function () {
    city = $("#textSearch").val();
    getWeather(city);
});

//回车键搜索事件
$("#textSearch").keyup(function (event) {
    if (event.keyCode == 13) {
        city = $("#textSearch").val();
        getWeather(city);
    }
});

// 初始默认显示 7 天的天气
let defaultDays = 7;
let currentDays = defaultDays;
let key = "d22ff0ab64d9468cbf2ceb23400dbdad";

// 天数切换按钮点击事件
$(".days button").click(function () {
    currentDays = $(this).val();
    getWeather(city);
});

// 默认显示益阳的天气


// 获取天气数据的函数
function getWeather(cityinput) {
    let imgArrUrl = [
        "../image/fine.png",
        "../image/cloudy.png",
        "../image/overcast.png",
        "../image/lightRain.png",
        "../image/moderateRain.png",
        "../image/AheavyRain.png",
        "../image/shower.png",
        "../image/thundershower.png",
    ];

    $.get(
        `https://geoapi.qweather.com/v2/city/lookup?location=${cityinput}&key=${key}`,
        function (res1) {
            if (res1.code != 200) {
                $(".loading").hide();
                return $('.promptBox').text('请输入正确的城市名称').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
                    $(this).animate({ width: '0', height: '0' }, 1000);
                });
            } else {
                $("section p").html(`
            <div class="box">
                <div class="header">
                    <div class="city"></div>
                    <div>归属地：<span class="area"></span></div>
                    <div>城市编号：<span class="city-temp"></span></div>
                    <div>经纬度：<span class="city-x"></span>&nbsp;&nbsp;<span class="city-y"></span></div>
                </div>
                <div class="currentWeather">
                    <div class="navHeader">当前天气</div>
                    <div class="CureentBody">

                    </div>
                </div>
                <div class="aftertimeSeven">
                    <div class="navHeader">未来${currentDays}天天气</div>
                    <div class="aftertime">
                    </div>
                </div>
            </div>  
        `);
            }

            // 省
            let adm1 = [];
            // 市
            let adm2 = [];
            // 地区
            let adm3 = [];
            // 城市名称
            let name = [];
            // 城市编号
            let nameid = [];
            // 经度
            let lon = [];
            // 纬度
            let lat = [];
            // 路径
            let detills = [];

            // 循环获取省市县信息
            for (let i = 0; i < res1.location.length; i++) {
                adm1.push(res1.location[i].adm1);
                adm2.push(res1.location[i].adm2);
                adm3.push(res1.location[i].country);
                name.push(res1.location[i].name);
                nameid.push(res1.location[i].id);
                lon.push(res1.location[i].lon);
                detills.push(res1.location[i].fxLink);
                lat.push(res1.location[i].lat);
            }

            // 渲染省市县信息
            $(".detills").attr("href", `${detills[0]}`);
            $(".city").text(name[0]);
            $(".area").text(adm3[0] + "-" + adm1[0] + "-" + adm2[0]);
            $(".city-temp").text(nameid[0]);
            $(".city-x").text(lon[0]);
            $(".city-y").text(lat[0]);

            $.get(
                `https://devapi.qweather.com/v7/weather/7d?location=${res1.location[0].id}&key=${key}`,
                function (res2) {
                    if (res2.code != 200) return $('.promptBox').text('获取天气信息失败，请稍后再试').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
                        $(this).animate({ width: '0', height: '0' }, 1000);
                    });
                    // 处理当前天气
                    function dqtq() {
                        let restemp = res2.daily[0];
                        let headerimg;

                        // 获取当前天气的字符串，使用 switch 进行判断，修改相应的图片路径
                        switch (restemp.textDay) {
                            case "晴":
                                headerimg = imgArrUrl[0];
                                break;
                            case "多云":
                                headerimg = imgArrUrl[1];
                                break;
                            case "阴":
                                headerimg = imgArrUrl[2];
                                break;
                            case "小雨":
                                headerimg = imgArrUrl[3];
                                break;
                            case "中雨":
                                headerimg = imgArrUrl[4];
                                break;
                            case "大雨":
                                headerimg = imgArrUrl[5];
                                break;
                            case "阵雨":
                                headerimg = imgArrUrl[6];
                                break;
                            case "雷阵雨":
                                headerimg = imgArrUrl[7];
                                break;
                        }

                        $(".CureentBody").html("");
                        $(".CureentBody").html(`
                            <div class="CureentLeft">
                                <img src="images/overcast.png" class="CureentBody0" alt="">
                                <div class="CureentBody1"></div>
                                <div class="CureentBody2"></div>
                            </div>
                            <div class="CureentBox">
                                <div>
                                    <div class="CureentBody3"></div>
                                    <div class="CureentBody4"></div>
                                </div>
                                <div>
                                    <div class="CureentBody5"></div>
                                    <div>相对湿度</div>
                                </div>
                                <div>
                                    <div class="CureentBody6"></div>
                                    <div>降水量</div>
                                </div>
                                <div>
                                    <div class="CureentBody7"></div>
                                    <div>能见度</div>
                                </div>
                                <div>
                                    <div class="CureentBody8"></div>
                                    <div>大气压</div>
                                </div>
                            </div>
                            <div class="CureentRight">
                                <div class="CureentBody9"></div>
                                <div class="CureentBody10"></div>
                            </div>`);
                        $(".CureentBody0").attr("src", headerimg);
                        $(".CureentBody1").text(restemp.textDay);
                        $(".CureentBody2").text(restemp.tempMax + "°");
                        $(".CureentBody3").text(restemp.windScaleNight);
                        $(".CureentBody4").text(restemp.windDirNight);
                        $(".CureentBody5").text(restemp.humidity + "%");
                        $(".CureentBody6").text(restemp.precip + "mm");
                        $(".CureentBody7").text(restemp.vis + "KM");
                        $(".CureentBody8").text(restemp.pressure + "hPa");
                        $(".CureentBody9").text(restemp.fxDate);
                        let now = new Date();
                        let hours = now.getHours();
                        hours = hours < 10 ? "0" + hours : hours;
                        let minutes = now.getMinutes();
                        minutes = minutes < 10 ? "0" + minutes : minutes;
                        let timeString = hours + ":" + minutes;
                        $(".CureentBody10").text(timeString);
                    }
                    dqtq();

                    // 处理未来天气
                    function aftertime(i) {
                        let restemp = res2.daily[i];
                        let headerimg = "";
                        let headerimgnigh = "";

                        // 获取当前天气的字符串，使用 switch 进行判断，修改相应的图片路径
                        switch (restemp.textDay) {
                            case "晴":
                                headerimg = imgArrUrl[0];
                                break;
                            case "多云":
                                headerimg = imgArrUrl[1];
                                break;
                            case "阴":
                                headerimg = imgArrUrl[2];
                                break;
                            case "小雨":
                                headerimg = imgArrUrl[3];
                                break;
                            case "中雨":
                                headerimg = imgArrUrl[4];
                                break;
                            case "大雨":
                                headerimg = imgArrUrl[5];
                                break;
                            case "阵雨":
                                headerimg = imgArrUrl[6];
                                break;
                            case "雷阵雨":
                                headerimg = imgArrUrl[7];
                                break;
                        }

                        switch (restemp.textNight) {
                            case "晴":
                                headerimgnigh = imgArrUrl[0];
                                break;
                            case "多云":
                                headerimgnigh = imgArrUrl[1];
                                break;
                            case "阴":
                                headerimgnigh = imgArrUrl[2];
                                break;
                            case "小雨":
                                headerimgnigh = imgArrUrl[3];
                                break;
                            case "中雨":
                                headerimgnigh = imgArrUrl[4];
                                break;
                            case "大雨":
                                headerimgnigh = imgArrUrl[5];
                                break;
                            case "阵雨":
                                headerimgnigh = imgArrUrl[6];
                                break;
                            case "雷阵雨":
                                headerimgnigh = imgArrUrl[7];
                                break;
                        }

                        let aftertime = `<div>
                    <div></div>
                    <div class="daytime">
                        <img src="${headerimg}" alt="">
                        <span>${restemp.textDay}</span>
                        <span>${restemp.windDirDay}</span>
                        <span>${restemp.windScaleDay}</span>
                    </div>
                    <div class="nighttime">
                        <img src="${headerimgnigh}" alt="">
                        <span>${restemp.textNight}</span>
                        <span>${restemp.windDirNight}</span>
                        <span>${restemp.windScaleNight}</span>
                    </div>
                    <div>
                        <span>气&nbsp;&nbsp;&nbsp;&nbsp;温</span>
                        <span>${restemp.tempMin}°~${restemp.tempMax}°</span>
                    </div>
                    <div>
                        <span>湿&nbsp;&nbsp;&nbsp;&nbsp;度</span>
                        <span>${restemp.humidity}%</span>
                    </div>
                    <div>
                        <span>降水量</span>
                        <span>${restemp.precip}mm</span>
                    </div><div>
                        <span>能见度</span>
                        <span>${restemp.vis}KM</span>
                    </div>
                    <div>
                        <span>大气压</span>
                        <span>${restemp.pressure}</span>
                    </div>
                </div>`;
                        $(".aftertime").append(aftertime);
                    }

                    $(".aftertime").html("");
                    for (let i = 0; i < currentDays; i++) {
                        aftertime(i);
                    }
                }
            );
        }
    );
}
